let layer = layui.layer
// * ================ 图片剪裁 =======================
let $image = $('.container img')
//  1.2 配置选项
// 指定预览区域
let options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: ".preview",
}
// 1.3 创建裁剪区域
$image.cropper(options)

//  * ================ 点击选择图片 ======================
$('#btnChooseImage').on('click', function () {
    $('#file').click()
})

$('#file').on('change', function () {
    const file = this.files[0]
    // console.log(file)
    if (!file) {
        return layer.msg('请选择图片')
    }
    const url = URL.createObjectURL(file)
    // console.log(url)
    $image.cropper('destroy').attr('src', url).cropper(options)
})

//  * ================ 点击图片上传 ======================
$('#btnCreateAvatar').on('click', function () {
    // 剪裁得到一张图片（canvas图片）
    let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
    })
    // 把图片转成base64格式
    let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串
    // axios
    axios.post("/my/update/avatar", "avatar=" + encodeURIComponent(dataURL))
        .then((res) => {
            // 提示
            if (res.data.status !== 0) {
                // 失败
                return layer.msg("更新头像失败");
            }

            layer.msg("更新头像成功");
            // 页面中的头像发生变化（更新）
            window.parent.getUserInfo();
        });
})